<template>
  <div class="zerosongs">
    <div class="content">
      <div class="songs_list">
        <div class="songs_item" v-for="(item,index) in zerosongs" :key="index">
          <div class="songs_item_left" v-if="$store.state.curindex==index">
            <i
              class="iconfont icon-huabankaobei-"
              v-if="$store.state.curplayList[$store.state.curindex].id==item.id"
            ></i>
            <p v-else>{{index+1}}</p>
          </div>
          <div class="songs_item_left" v-else>{{index+1}}</div>

          <div class="songs_item_mid" @click="play(index,zerosongs)">
            <div class="mid_name">{{item.name}}</div>
            <div class="mid_autor">{{item.ar[0].name}} - {{item.al.name}}</div>
          </div>
          <div class="songs_item_right">
            <i class="iconfont icon-tianjia" @click="add_curlist(item)"></i>
            <!-- <i class="iconfont icon-liebiao-dian"></i> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import { Toast } from "mint-ui";
export default {
  name: "zerosongs",
  props: {
    zerosongs: {}
  },
  methods: {
    // 点击歌曲 (播放并把当前列表添加到播放列表)
    play(index, songMenu) {
      this.audio.playSong(songMenu[index].id);
      this.$store.commit("openPlayer", true);
      let curlist = JSON.parse(JSON.stringify(songMenu));
      this.$store.commit("curPlayList", curlist);
      this.$store.commit("curIndex", index);
    },
    // 点击添加到下一首播放
    add_curlist(item) {
      this.$store.commit("addCurList", item);
      Toast({
        message: "下一首播放",
        duration: 2000
      });
      // 如果当前没有播放歌曲则直接播放
      if (this.$store.state.curindex == -1) {
        this.audio.playSong(item.id);
        this.$store.commit("curIndex", 0);
      }
    }
  },
  created() {}
};
</script>

<style lang='scss' scoped>
$zerocolor: #d43c33;
.zerosongs {
  z-index: 3;
  .songs_list {
    width: 100%;
    padding: 10px;
    .songs_item {
      display: flex;
      width: 100%;
      height: 40px;
      margin-top: 5px;
      .songs_item_left {
        width: 8%;
        line-height: 40px;
        color: #bfbbbb;
        i {
          color: $zerocolor;
        }
      }
      .songs_item_mid {
        width: 80%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        text-align: left;
        .mid_name {
          font-size: 14px;
          line-height: 26px;
        }
        .mid_autor {
          font-size: 10px;
          color: #bfbbbb;
          line-height: 14px;
        }
      }
      .songs_item_right {
        width: 10%;
        line-height: 40px;
        i {
          margin: 0 8px;
        }
      }
    }
  }
}
</style>